import React, { Component } from 'react'
import { connect } from 'react-redux'
import { actionCreator } from '../../store/combineReducer/todolist'

class Home extends Component {
  componentDidMount() {
    console.log(this.props, 'props')
    // 发送一个命令，让action去处理数据请求，
    this.props.dispatch(actionCreator.getInitTodoList())
  }

  render() {
    // redux拿到的数据
    const {
      todo: { value, list },
    } = this.props
    return (
      <div>
        <input
          value={value}
          onChange={(e) => {
            this.props.dispatch(actionCreator.getInputChangeValue(e.target.value))
          }}
        />
        <button
          onClick={() => {
            this.props.dispatch(actionCreator.getAddTodoItem())
          }}
        >
          提交
        </button>
        <ul>
          {list.map((item, index) => {
            return (
              <li
                key={item.id}
                onClick={() => {
                  this.props.dispatch(actionCreator.getRemoveTodoItem(index))
                }}
              >
                {item.value}
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}

export default connect(
  (state) => {
    return { ...state }
  },
  (dispatch) => {
    return { dispatch }
  }
)(Home)
